import { Button, Card, List, Typography } from 'antd'
import React from 'react'
import { connect } from 'react-redux';

const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
];

function Index(props) {
    return (
        <Card title="通知中心"
            extra={<Button size='small' onClick={() => { props.dispatch({ type: "READ_ALL" }) }}>全部已读</Button>}>
            <List
                header={<div style={{ display: 'flex', justifyContent: 'center' }}>Header</div>}
                footer={<div style={{ display: 'flex', justifyContent: 'center' }}>Footer</div>}
                dataSource={data}
                renderItem={(item) => (
                    <List.Item style={{ display: 'flex', alignContent: 'space-between' }}>
                        <Typography.Text mark>[ITEM]</Typography.Text> {item}
                        <Button size='small'>已读</Button>
                    </List.Item>
                )}
            />
        </Card>
    )
}

export default connect(state => state)(Index)

